<template>
  <view class="searchInput">
    <van-search
      shape="round"
      background="#c00"
      placeholder="搜索"
      @change="inputChange($event)"
      :use-action-slot="true"
      @focus="inputFocus"
      >
      <view slot="action" class="btn" @click="searchData">搜索</view>
    </van-search>
    <view class="searchfalse" v-if="!searchstate">
      <view class="historyTitle">
        <view class="text">
          历史记录
        </view>
        <view class="icon">
          <van-icon name="delete" @click="clearHistory"/>
        </view>
      </view>
      <view class="histotyContent" @click="searchHistory($event)">
          <van-tag size="medium" color="#949998" class="tags" v-for="item in searchHistoryRecord" :key="item" data-name="tag" :data-item="item">{{item}}</van-tag>
      </view>
    </view>
    <view class="searchtrue" @click="goDetail($event)" v-else>
        <van-cell v-for="(item, index) in searchlist" :key="index" data-name="goods" :data-goods_id="item.goods_id" :title="item.goods_name" is-link />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        search:"",
        searchlist:[],
        searchstate:false,
        searchHistoryRecord: wx.getStorageSync('searchHistoryRecord') || []
      }
    },
    onLoad(){
      uni.$on('searchimg',this.searchimg)
    },
    methods: {
      inputChange(e){
        this.search = e.detail
      },
      inputFocus(){
          this.searchstate = false;
      },
      clearHistory(){
        this.searchHistoryRecord = []
        wx.setStorageSync("searchHistoryRecord",[])
      },
      searchHistory(e){
        let data = e.target.dataset
        if(data.name === 'tag'){
          this.search = data.item
          this.searchData()
        }
        
      },
      async searchData(){
        // uni._.debounce(()=>{
        //   console.log(1232);
        // }, 500)
        if(!this.search) return
        let {data} = await uni.$http.get("goods/qsearch?query="+this.search)
        if(data.meta.status !== 200) return wx.showToast({title:"数据加载失败!"})
        console.log(data)
        this.searchstate = true
        this.searchlist = data.message;
        let index = this.searchHistoryRecord.findIndex(item => item === this.search)
        if(index !== -1){
          this.searchHistoryRecord.splice(index, 1)
          this.searchHistoryRecord.unshift(this.search)
        }else{
          this.searchHistoryRecord.unshift(this.search)
        }
        wx.setStorageSync("searchHistoryRecord", this.searchHistoryRecord)
      },
      goDetail(e){
        let data = e.target.dataset
        console.log(data);
        if(data.name === 'goods'){
          wx.navigateTo({url:'/pages/shopdetail/shopdetail?goods_id='+data.goods_id})
        }
      },
      searchimg(key){
        this.search = key
        this.searchData()
      }
    }
  }
</script>

<style scoped lang="scss">
  .searchInput{
    .btn{
      color: #fff;
    }
    .searchfalse{
      .historyTitle{
        display: flex;
        justify-content: space-between;
        // box-sizing: border-box;
        margin: 0 10rpx;
        line-height: 60rpx;
        height: 60rpx;
        font-size: 25rpx;
        border-bottom: 1rpx solid #ccc;
        .icon{
          font-size: 36rpx;
        }
      }
      .histotyContent{
        padding: 10rpx;
        box-sizing: border-box;
        .tags{
          display: inline-block;
          padding: 5rpx;
        }
      }
    }
  }
</style>
